<template>
  <div class="test">
    <el-card style="margin-top:20px">
      <el-table :data="skuList" border stripe>
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="名称" prop="skuName" />
        <el-table-column label="描述" prop="skuDesc" />
        <el-table-column label="默认图片">
          <template v-slot="{row,$index}">
            <el-image style="width:100px;height:80px" :src="row.skuDefaultImg" />
          </template>
        </el-table-column>
        <el-table-column label="重量" prop="weight" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="操作" align="center" width="250">
          <template v-slot="{row,$index}">
            <el-button v-if="row.isSale === 0" type="success" size="small" title="上架" icon="el-icon-top" @click="onSale(row)" />
            <el-button v-else type="info" size="small" title="下架" icon="el-icon-bottom" @click="cancelSale(row)" />
            <el-button type="warning" size="small" title="修改sku" icon="el-icon-edit-outline" @click="updateSku(row)" />
            <el-button type="info" size="small" title="查看sku详情" icon="el-icon-info" @click="lookSkuDetail(row)" />
            <el-button type="danger" size="small" title="删除sku" icon="el-icon-delete" @click="deleteSku(row)" />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page" :page-size="limit" :total="total" layout="prev,pager,next,jumper" @current-change="handleCurrentPage" />
    </el-card>
    <!-- 抽屉的使用 -->
    <el-drawer :visible.sync="drawer" :width-header="false" size="50%">
      <el-row>
        <el-col :span="5">名称</el-col>
        <el-col :span="16">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">描述</el-col>
        <el-col :span="16">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">价格</el-col>
        <el-col :span="16">{{ skuInfo.price }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">平台属性</el-col>
        <el-col :span="16">
          <el-tag v-for="attrValue in skuInfo.skuAttrValueList" :key="attrValue.id" type="success">{{ attrValue.attrName }}</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">销售属性</el-col>
        <el-col :span="16">
          <el-tag v-for="saleAttrValue in skuInfo.skuSaleAttrValueList" :key="saleAttrValue.id">{{ saleAttrValue.saleAttrValueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商品图片</el-col>
        <el-col :span="18">
          <el-carousel class="carousel" trigger="click" height="400px">
            <el-carousel-item v-for="img in skuInfo.skuImageList" :key="img.id">
              <el-image :src="img.imgUrl" style="width:400px;height:400px" /></el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { getPageList, onSale, cancelSale, deleteSku, getById } from '@/api/product/sku'
export default {
  name: 'Sku',
  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      skuList: [],
      drawer: false,
      skuInfo: {
        price: '',
        skuName: '',
        skuDesc: '',
        weight: '',
        skuDefaultImg: '',
        skuImageList: [],
        skuAttrValueList: [],
        skuSaleAttrValueList: []
      }
    }
  },
  mounted() {
    this.getPageSkuList()
  },
  methods: {
    // 当当前页修改时执行
    handleCurrentPage(page) {
      this.page = page
      this.getPageSkuList()
    },
    // 获取sku分页列表的函数
    async getPageSkuList() {
      try {
        const res = await getPageList(this.page, this.limit)
        this.total = res.data.total
        this.skuList = res.data.records
        console.log(res)
      } catch (error) {
        this.$message.error('获取sku的分页列表失败')
      }
    },
    // 上架
    async onSale(row) {
      try {
        await onSale(row.id)
        this.$message.success('sku商品上架成功')
        row.isSale = 1
        this.getPageSkuList()
      } catch (error) {
        this.$message.error('sku商品上架失败')
      }
    },
    // 下架
    async cancelSale(row) {
      try {
        await cancelSale(row.id)
        this.$message.success('sku商品下架成功')
        row.isSale = 0
      } catch (error) {
        this.$message.error('sku商品下架失败')
      }
    },
    // 修改sku
    updateSku(row) {
      this.$message.info('功能正在开发中')
    },
    // 删除sku
    async delete(row) {
      try {
        await deleteSku(row)
        this.$message.success('删除sku成功')
        if (this.skuList.length === 1) {
          this.page -= 1
        }
        this.getPageSkuList()
      } catch (error) {
        this.$message.error('删除sku失败')
      }
    },
    // 查看sku详情
    async lookSkuDetail(row) {
      this.drawer = true
      try {
        const res = await getById(row.id)
        this.skuInfo = res.data
      } catch (error) {
        this.$message.error('获取sku详情失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.carousel {
  width: 400px;

  // ::v-deep .el-carousel__indicator {
  :deep(.el-carousel__indicator) {
    button {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: aqua;
      border-radius: 50%;
    }

    &.is-active {
      button {
        background-color: green;
      }
    }
  }
}

.el-row {
  height: 40px;

  .el-col {
    height: 40px;
    line-height: 40px;

    &.el-col-5 {
      font-size: 20px;
      font-weight: 600;
      text-align: right;
      margin-right: 20px;
    }

    &.el-col-16 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
